<!-- 黑色弹框组件 -->
<template>
	<view class="location">
		<view :style="size" class="page">
			<!-- 右上角关闭按钮 -->
			<view v-if="fork" class="fork" @click="dotClose">
				<u-icon name="close" size="50" color="#ffffff"></u-icon>
			</view>

			<!-- 内容 -->
			<slot />

			<!-- 底部关闭按钮 -->
			<view v-if="close" class="close" @click="dotClose">
				<u-icon name="close" size="28" color="#ffffff"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
/**
 * @property {Object} 高度 宽度 背景颜色
 */
export default {
	name: "frame",
	props: {
		// 组件的宽高和背景颜色
		size: {
			type: Object,
			default: () => {
				return {
					width: 'auto',
					height: 'auto',
				}
			}
		},
		// 右上角关闭按钮
		fork: {
			type: Boolean,
			default: false
		},
		// 底部关闭按钮
		close: {
			type: Boolean,
			default: false
		},
	},
	data() {
		return {

		};
	},
	methods: {
		dotClose(){
			this.$emit('change')
		}
	},
}
</script>

<style lang="scss" scoped>
.location {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 100;
	opacity: .8;
	background: rgba(68, 68, 68, 0.8);
}

.page {
	padding: 32rpx;
	position: relative;

	.fork {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
	}

	.close {
		position: absolute;
		width: 60rpx;
		height: 60rpx;
		background: rgb(135, 135, 135);
		left: 0;
		right: 0;
		margin: auto;
		bottom: -100rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}</style>